<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>会商宝站内搜索首页</title>

<script type="text/javascript" src="/js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="/js/jquery-form.js"></script>
<script type="text/javascript" src="/js/template-native.js"></script>
<script type="text/javascript">
	var isdug = true;
	function log(msg) {
		if (isdug) {
			console.log(msg);
		}
	}

	/**
	 * 一些显示工具 
	 */
	var Util = {
		addFeild : function(form, name, value) {
			// TODO 验证参数 
			if ($(form).find("input[name=" + name + "]").length == 0) { // 没有，增加
				$("<input>").attr({
					name : name,
					value : value,
					type : "hidden"
				}).appendTo(form);
			} else {// 有数据，修改原值 
			}
		}
	};

	// 参数区
	var searchPath = "/solr/hsbsell1/select";

	var isloading = false;

	/**
	 * 初始化结果界面
	 */
	function initResultView(result) {
		var html = template("doc_t", result.response);
		isloading = false;
		$("#result").html(html);

		// 处理高亮
		var highlighting = result.highlighting;
		for (k in highlighting) {
			var $li = $("#result").find("li[sellid=" + k + "]");
			//log($li);
			var m = highlighting[k];
			for (v in m) {
				//log("key : " + v + "\tvalue : " + m[v]);
				$li.find(".d_" + v).html(m[v]);
			}
		}
		// 处理 debug 信息
		$("<div>").html(result.debug.parsedquery).appendTo($("#debug"));
		var explain = result.debug.explain;
		for (exk in explain) {
			var $li = $("#result").find("li[sellid=" + exk + "]");
			$("<textarea>").html(explain[exk]).css("width", "600px").css(
					"height", "400px").appendTo($li);
		}
	}
	function searchSubmitHandler() {
		if (isloading) {
			log("正在查询，请稍后");
		}
		isloading = true;
		log("开始查询数据。。。");

		// TODO 增加参数
		Util.addFeild(this, "wt", "json");
		Util.addFeild(this, "rows", "30");
		Util.addFeild(this, "debug", "true");
		Util.addFeild(this, "pf", "title^300 keyword^70"); // search.baseParams.put("pf", "title^200 keyword^50");

		// ajax 请求
		$(this).ajaxSubmit(function(data) {
			try {
				data = JSON.parse(data);
			} catch (e) {
				log(" some exception ");
				console.log(e);
			}
			initResultView(data);
		});

		return false;
	}
	function loadHandler() {
		log(" html loaded ");
		// 表单拦截 
		$("#search_form").submit(searchSubmitHandler);
	}
	$(loadHandler);
</script>

<style type="text/css">
.search {
	font-size: 2em;
	padding: 0.5em;
}

#result {
	margin: 20px;
}

li {
	margin-bottom: 1px;
	border-bottom: 2px gray solid;
	list-style: none;
}

b {
	color: red;
}

.d_title {
	font-size: 2em;
}
li>span{
	color: green;
	font-size: 1.5em;
}
</style>
</head>
<body>

	<script type="text/html" id="doc_t">
<ul>
	 <%for(var n = 0; n < docs.length; n++){%>
	<li sellid="<%=docs[n].id%>">
		<img src="<%=docs[n].thumb %>" />
		<span>产品编号：</span><p class="d_id"><%=docs[n].id%></p>
		<span>产品名称：</span><p class="d_title"><%=docs[n].title%></p>
		<span>公司名称：</span><p class="d_company"><%=docs[n].company %></p>
		<span>产品介绍：</span><p class="d_introduce"><%=docs[n].introduce%></p>
		<span>公司地址：</span><p class="d_address"><%=docs[n].address%></p>
		<span>关键字   ：</span><p class="d_keyword"><%=docs[n].keyword %></p>
	</li>
	<%}%>
</ul>
</script>
	<div>
		<img src="img/logo.gif" />
	</div>
	<div>
		<form action="/solr/hsbsell1/select" id="search_form">
			<input type="text" class="search" name="q" value="输入搜索内容" /> <input
				type="submit" class="search" value="搜索">
		</form>
	</div>

	<div id="debug"></div>
	<div id="result"></div>

</body>
</html>